<template>
	<view class="container">
		<pageHeader></pageHeader>
			<swiper class="swiper"    :autoplay="swiperCfg.autoplay"
		   				:interval="swiperCfg.intervalSelect" :circular="swiperCfg.circular" v-if="info.sliders && info.sliders.length>0">
				<swiper-item  v-for="(item, index) in info.sliders">
					<a class="swiper-item uni-bg-red" :href="item.link">
						<image :src="item.thumb"></image>
						<view class="swiper-title" v-if="item.title">
							{{item.title}}
						</view>
					</a>
				</swiper-item>
			</swiper>
			<view class="solution">
				<view class="solution-header">
					<view class="solution-header-title">
						解决方案
					</view>
				</view>
				<view class="solution-body">
					<view class="solution-body-item" v-for="(item, index) in solution" @click="navDetail(item)">
						<view class="solution-body-item-thumb">
							<image :src="item.logo"></image>
						</view>
						<view class="solution-body-item-title">
							<view class="solution-body-item-mtitle">
								{{ item.title }}
							</view>
							<view class="solution-body-item-second">
								<view class="solution-body-item-second-subtitle">
									{{ item.subtitle }}
								</view>
								<view class="solution-body-item-second-ico">
									<image src="/static/img/index/ico-arrow.png"></image>
								</view>
							</view>
						</view>
						
					</view>
					
				</view>
			</view>
			
			<view class="aboutus">
				<view class="video_container" v-if="info.video">
					<video class="video" :src="info.video" :poster="info.poster"  controls ></video>					
				</view>
				<view class="aboutus-right">
					<view class="aboutus-header">
						关于我们
					</view>
					<view class="aboutus-body word-clamp-5" v-html="info.summary"></view>
					<view class="aboutus-more" @click="aboutus">
						了解更多
					</view>
					
				</view>
				
			</view>
			
			
			<view class="corporation">
				<view class="corporation-header">
					<view class="corporation-header-title">
						合作客户
					</view>
				</view>
				<view class="corporation-body">
					<view class="corporation-item" v-for="(item, index) in partner" @click="viewpartner(item)">
						<image :src="item.logo"></image>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import  pageHeader from '@/components/header/header.vue'
	import api from '@/api/index.js'
	export default {
		components:{
			pageHeader
		},
		data() {
			return {
				swiperCfg:{
					autoplay:true,
					intervalSelect:3000,
					circular:true,
				},
				info:{},
				partner:[],
				solution:[],
				href: 'https://uniapp.dcloud.io/component/README?id=uniui'
			}
		},
		onLoad(){
			this.getInfo();
			setTimeout(()=>{
				this.getShare()
			}, 500)
			
		},
		onShow(){
			//统计数据
			let interval = setInterval(()=>{
				 if(uni.getStorageSync('token')) {
					 clearInterval(interval);
					 api.getRequest('stat', {
					 	top:'index',
					 	sub:'',
					 	argv:''
					 });
				 }
			}, 50)
			
		},
		methods: {
			navDetail(item) {
				console.log(item)
				if(item.link) {
					console.log(item.link)
					window.location.href = item.link;
					return ;
					uni.navigateTo({
						url:'/pages/web/web?src='+encodeURIComponent(item.link)
					})
				}
				else {
					uni.navigateTo({
						url:'/pages/detail/detail?type=solution&id='+item.id
					})
				}
			},
			getInfo(){
				const that = this;
				api.getRequest('index', {}).then((res)=>{
					let response = res.data;
					that.info = response.setting;
					that.partner = response.partner
					that.solution = response.solution
				})
			},
			viewpartner(item) {
				if(item.link) {
					console.log(item.link)
					window.location.href = item.link;
					return ;
					uni.navigateTo({
						url:'/pages/web/web?src='+encodeURIComponent(item.link)
					})
				}
			},
			aboutus() {
				uni.navigateTo({
					url:'/pages/detail/detail?type=aboutus&id=0'
				})
			},//获取分享链接
			getShare(){
				 const that = this;	
				 let uuid = "";
				 if(this.$route.query.uuid) {
				 	uuid = this.$route.query.uuid;
				 	uni.setStorageSync('uuid', uuid)
				 }
				 else {
				 	uuid = uni.getStorageSync('uuid');
				 }
				 api.getRequest('shareData', {
				 	uuid:uuid,
					url:window.location.href
				 }).then((res)=>{
					 let response = res.data;
					 console.log('set setting', response);
					 
					 that.setShare(response.setting);
				 });
			},
			setShare(setting){
				let link = setting.shareLink;
				// if(uuid) link+='&uuid='+uuid;
				window.jWeixin.updateAppMessageShareData({ 
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
				
				window.jWeixin.updateAppMessageShareData({
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
				window.jWeixin.onMenuShareAppMessage({
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
				window.jWeixin.onMenuShareTimeline({
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
			}
		}
	}
</script>
<style>
	.container{
		background-image: url('@/static/img/bg.png');
		position: absolute;
		left: 0;
		right: 0%;
		top:0;
		min-height: 100%;
	}
	
	.swiper{
		background-color: #fff;
		width: 100%;
		height: 350rpx;
		background-color: rgba(255, 255, 255, 0);
	}
	.swiper-item{
		width: 100%;
		height: 100%;
		display: block;
		text-decoration: none;
		position: relative;
	}
	.swiper-item image{
		height: 100%;
		width: 100%;
		object-fit: cover;
	}
	.swiper-title{
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0,0,0,.8);
		font-size: 20rpx;
		color: #fff;
		display: flex;
		align-items: center;
		height: 30rpx;
		padding: 20rpx;
		overflow: hidden;
	}
	
	.solution{
		margin: 25rpx 35rpx;
	}
	.solution-header{
		display: flex;
		width: 100%;
		justify-content: center;
	}
	.solution-header-title{
		background-image: url('/static/img/index/title-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width:233rpx;
		height: 59rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		letter-spacing: 0.1em;
	}
	.solution-body{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.solution-body-item{
		width: 318rpx;
		height: 133rpx;
		background-color: #3a145a;
		overflow: hidden;
		margin-top: 33rpx;
		border-radius: 12rpx;
		border: 1rpx solid #5a2e68;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx;
	}
	.solution-body-item-thumb{
		height: 95rpx;
		width: 95rpx;
	}
	.solution-body-item-thumb image{
		height: 95rpx;
		width: 95rpx;
	}
	.solution-body-item-title{
		display: flex;
		flex:1;
		margin-left: 15rpx;
		flex-direction: column;
		justify-content: center;
	}
	.solution-body-item-title .solution-body-item-mtitle{
		font-size: 28rpx;
		color: #fff;
		font-weight: bold;
	}
	
	.solution-body-item-second{
		display: flex;
		align-items: center;
		justify-content: space-between;	
		font-size: 0;
		margin-top: 15rpx;
	}
	
	 .solution-body-item-second-subtitle{
		font-size: 12rpx;
		color: #fff;
	}	
	.solution-body-item-second-ico{
		height: 18rpx;
		width: 18rpx;
	}
	.solution-body-item-second-ico image{
		height: 100%;
		width: 100%;
	}
	
	.aboutus{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 35rpx 30rpx;
		margin-top: 50rpx;
	}
	.aboutus .video_container{
		width: 366rpx !important;
		height: 255rpx;
		background-image: url('/static/img/index/video-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
	.aboutus video{
		height: 100%;
		width: 100%;
		box-sizing: border-box;
	}
	.aboutus .aboutus-right{
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 18rpx;
		justify-content: center;
		height: 255rpx;
		box-sizing: border-box;
	 
	}
	.aboutus-header{
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		letter-spacing: .2em;
		position: relative;
		width: 145rpx;
		text-align: center;
	}
	.aboutus-header::after{
		display: block;
		content: '';
		width: 145rpx;
		height: 15rpx;
		background-image: url('/static/img/index/header-bg.png');
		background-size: 100% 100%;
		margin-top: -15rpx;
	}
	.aboutus-body{
		margin-top: 5rpx;
		text-indent: 2em;
		color: #fff;
		font-size: 24rpx;
		line-height: 1.7em;
		text-align: justify;
	} 
	.aboutus-body  p span{
		font-size: 16rpx !important;
	}
	 
	 .word-clamp-5{
	 	overflow: hidden;
	 	text-overflow: ellipsis;
	 	display: -webkit-box;
	 	-webkit-line-clamp: 5;
	 	overflow:hidden;
	 	-webkit-box-orient: vertical;
	 }

	.aboutus-more{
		margin-top: 20rpx;
		text-align: center;
		height: 40rpx;
		width: 135rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 18rpx;
		background-image: url('/static/img/index/more-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		letter-spacing: .1em;
		
		box-sizing: border-box;
	}
	
	
	.corporation{
		padding: 25rpx 35rpx;
		background-color: #2a1a48;
		 
	}
	.corporation-header{
		display: flex;
		width: 100%;
		justify-content: center;
	}
	.corporation-header-title{
		background-image: url('/static/img/index/title-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width:233rpx;
		height: 59rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		letter-spacing: 0.1em;
	}
	.corporation-body{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-bottom: 200rpx;
	}
	.corporation-item{
		width: 217rpx;
		height: 75rpx;
		background-color: #38185b;
		overflow: hidden;
		margin-top: 33rpx;
		border-radius: 12rpx;
		border: 1rpx solid #5a2e68;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		background-image: -webkit-linear-gradient( 4deg, rgba(200,32,144, 0.231) 0%, rgba(106,20,209, 0.231) 100%);
	}
	.corporation-item:nth-child(3n+2) {
		margin-left: 10rpx;
	}
	.corporation-item:nth-child(3n+3) {
		margin-left: 10rpx;
	}
	.corporation-item image{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	
</style> 
